<template>
	<view>
		<view class="p-3" style="padding-bottom: 300rpx;">
			<view class="bt-block">
				<bg-title class="margin-top mx-3">
					<text class="font-14 font-normal">工资结算确认单</text>
				</bg-title>
				<view class="px-3">
					<view class="font-13 py-5 px-5">
						<bg-desc class="mb-5" label="姓名" :value="obj.userName"></bg-desc>
						<bg-desc class="my-5" label="身份证号" :value="obj.idCardNo"></bg-desc>
						<bg-desc class="my-5" label="手机号" :value="obj.phone"></bg-desc>
					</view>
					<view class="bt-line-1"></view>
					<view class="font-13 py-4 px-5">
						<bg-desc class="mt-2 mb-5" label="项目名称" :value="obj.projectName"></bg-desc>
						<bg-desc class="my-5" label="结算周期" :value="obj.entryDate + '-' + obj.lastWorkDate"></bg-desc>
						<bg-desc class="my-5" label="结算工日" :value="obj.attendanceDays + ' 天'"></bg-desc>
						<bg-desc class="my-5" label="日工资" :value="obj.daySalary + ' 元'"></bg-desc>
						<bg-desc class="my-5" label="加班工资" :value="obj.overtimeSalary + ' 元'"></bg-desc>
						<bg-desc class="my-5" label="扣除款项" :value="`${obj.deductAmount} 元(不限于借支、劳保物资、违规)`"></bg-desc>
						<bg-desc class="my-5" label="劳保费" :value="`${obj.workWearAmount} 元`"></bg-desc>
						<view style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
						<view v-if="materialUnreturnedList && materialUnreturnedList.length" style="padding: 10rpx; min-width: 240px;">
							<view style="font-weight: bold; margin-bottom: 8px;">物资明细</view>
							<view style="display: flex; font-size: 13px; font-weight: bold;">
								<view style="flex: 1;max-width: 140rpx;min-width: 140rpx;">物资名称</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">未退还数量</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">单价</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">总价</view>
							</view>
							<view v-for="item in materialUnreturnedList" :key="item.materialId" style="display: flex; font-size: 13px; margin-top: 4px;">
								<view style="flex: 1;max-width: 140rpx;min-width: 140rpx;">{{ item.materialName }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.unreturnCount }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.unitPrice }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.deductAmount }}</view>
							</view>
						</view>
					</view>
						<bg-desc class="my-5" label="合计结算工资" :value="obj.actualAmount + ' 元'"
							:valueStyle="{ 'color': '#EE3636' }"></bg-desc>
						<!-- <bg-desc class="my-5" label="合计结算工资" :value="obj.amount + ' 元'"
							:valueStyle="{ 'color': '#EE3636' }"></bg-desc> -->
						<bg-desc class="my-5" label="结算日期" :value="obj.createTime"></bg-desc>
					</view>
				</view>
			</view>
			<view class="bt-block mt-3">
				<bg-cell :border="false">
					<view class="flex justify-between">
						<view class="flex-1" style="width: 50%;">
							<bg-title class="mb-3">
								<text class="font-14 font-normal">批准:</text>
							</bg-title>
							<u--image width="154rpx" height="154rpx" src="/static/images/ui/index/zhang.jpg"></u--image>
						</view>
						<view class="flex-1">
							<bg-title class="mb-3"><text class="font-14 font-normal">申请: 本人签署</text></bg-title>
							<u--image :src="obj.signedImg" width="298rpx" height="154rpx"></u--image>
						</view>
					</view>
				</bg-cell>
			</view>
			<view class="bt-block my-3">
				<bg-title class="margin-top mx-3">
					<text class="font-1">流程节点图</text>
				</bg-title>
				<view class="p-3">
					<bg-step :list="authList"></bg-step>
				</view>
			</view>
		</view>
		<!-- todo -->
		<view class="bt-footer bt-gap"
			v-if="obj.status == 1 && this.$auth.hasRoleOr(['team', 'project']) && obj.auditUserId == $store.getters.userId">
			<bg-btn plain @click="showReason = true">审批未通过</bg-btn>
			<bg-btn @click="audit(2)">审批通过</bg-btn>
		</view>
		<!-- 填写拒绝理由弹窗 -->
		<u-popup :show="showReason" @close="showReason = false" @open="showReason = true" :closeable="true" :round="10"
			mode="center">
			<view style="width: 720rpx; padding: 30rpx;">
				<view class="text-center font-15 font-bold mb-4">{{ '填写理由' }}</view>
				<u-textarea v-model="reason" placeholder="请输入拒绝理由"></u-textarea>
				<view class="bt-gap flex justify-around" style="margin-top: 60rpx;">
					<bg-btn @click="showReason = false"
						style="height:90rpx; color: #86898c;background-color: #fafafa; border: none;">取消</bg-btn>
					<bg-btn @click="ReasonConfirm" style="height:90rpx">确定</bg-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { settleDetail, settleManagerAudit, settleLeaderAudit } from '../../../api/retire';
export default {
	data() {
		return {
			authList: [],
			id: '',
			obj: '',
			// 拒绝弹窗
			showReason: false,
			reason: '',
			materialUnreturnedList: []
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
	},
	methods: {
		getData() {
			settleDetail(this.id).then(res => {
				this.obj = res.data
				this.authList = [
					{ auditUserName: this.obj.userName, auditTime: this.obj.createTime },
					...this.obj.auditRecordList
				]
				this.materialUnreturnedList = this.obj.materialUnreturnedList
			})
		},
		audit(status) {
			let method = null
			if (this.$auth.hasRole("team")) {
				method = settleLeaderAudit
			}
			if (this.$auth.hasRole("project")) {
				method = settleManagerAudit
			}
			// if (method) {

			// 	method({ id: this.id, status: status }).then(res => {
			// 		this.$modal.msg('审批成功')
			// 		uni.$emit("refresh-settle", true)
			// 		this.$tab.navigateBackDelay()
			// 	})
			// }

			if (method) {
				let obj = {
					id: this.id,
					status: status
				}
				if (status == 3) {
					obj.reason = this.reason
				}
				method(obj).then(res => {
					this.$modal.msg('审批成功')
					uni.$emit("refresh-settle", true)
					this.$tab.navigateBackDelay()
				})
			}
		},
		ReasonConfirm() {
			if (this.reason.trim() == '') {
				this.$modal.msg('请输入拒绝理由')
				return
			}
			this.showReason = false
			this.audit(3)
		}
	}
}
</script>

<style></style>
